<template>
	<div>

		<div class="regster-wrap login mt60 bgff">
			<div class="logo-title plr20 ptb20 header-view">
				<router-link to="/">
					<a class="fl" href="#"><img src="../../static/picture/logo.png" alt=""></a>
				</router-link>
				<router-link to="regist">
					<a class="fr mt10" href="#">免费注册</a>
				</router-link>

			</div>
			<!-- 账号登录 -->
			<form id="login" action="" method="post" class="layui-form fz14">
				<input type="hidden" name="_token" value="">
				<h3 class="ptb20 fz20 tx-c">账号登录</h3>
				<div class="input-item mb20 phone">
					<i class="khbicon khb-phone"></i>
					<input type="text" v-model="phone" name="phone" value="" required="phone" lay-verify="phone" placeholder="请输入手机号" class="layui-input input inputfocus"
					 autofocus="">
				</div>
				<div class="input-item mb20 password">
					<i class="khbicon khb-password"></i>
					<input type="password" v-model="password" name="password" placeholder="请输入密码" class="layui-input input inputfocus" lay-verify="required">
				</div>
				<div class="input-item mb20">
					<i class="khbicon khb-captcha"></i>
					<div class="layui-input-inline">
						<input type="text" name="captcha" placeholder="请输入验证码" lay-verify="required" class="layui-input">
					</div>
					<div class="layui-input-inline">
						<img class="pointer" src="http://yun.kouhaobang.com/captcha/default?4uiATCD7" onclick="this.src=&#39;http://yun.kouhaobang.com/captcha/default?j2PjjVnr&amp;&#39;+Math.random()"
						 alt="">
					</div>
				</div>

				<div class="mb20 submit">
					<button type="button" class="layui-btn" lay-submit="" lay-filter="formDemo" @click="loginSuccess">登录</button>
				</div>
				<div class="mb20 protocol">
					<router-link to="forget">
						<a href="#" class="fz14 fr">忘记密码</a>
					</router-link>
				</div>
			</form>
		</div>
		<div class="tx-c c-999 mt20">蜀ICP备13026644号-6</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				phone:'',
				password:''
			}
		},
		methods: {
			loginSuccess() {
				if(this.phone == ''){
					this.$message.error('手机号不能为空');
					return;
				}
				if(this.password == ''){
					this.$message.error('密码不为空');
					return;
				}
				this.$api.req.login({
					  userPhone: this.phone,
					  password: this.password,
					  rememberMe: '',
				}).then(res => {
					console.log(res);
					this.$store.commit('setAccToken',res.data.token);
					localStorage.setItem("token",res.data.token)
					this.$router.push({
						name:'home',
						params:{token:res.data.token}
					})
					
				})
				
				//this.$router.push('home').
			}
		}
	}
</script>

<style>
	@import url("../../static/layui/css/layui.css");
	@import url("../../static/css/reset.css");
	@import url("../../static/css/common.css");
	@import url("../../static/css/login-register.css");
	@import url("../../static/css/khbicon.css");

	.input-item {
		text-align: left;
	}
	.header-view{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.protocol{
		text-align: center;
	}
</style>
